<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<link rel="apple-touch-icon" sizes="76x76" href="./assets/img/favicon.ico">
<link rel="icon" type="image/png" href="./assets/img/favicon.ico">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<title>Anchor Bootstrap 4.1.3 UI Kit by WowThemesNet</title>
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no' name='viewport'/>
    
<!-- Google Font -->
<link href="https://fonts.googleapis.com/css?family=Nunito:300,300i,400,600,700" rel="stylesheet">
    
<!-- Font Awesome Icons -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
    
<!-- Main CSS -->
<link href="./assets/css/main.css" rel="stylesheet"/>
    
<!-- Animation CSS -->
<link href="./assets/css/vendor/aos.css" rel="stylesheet"/>
    
<!-- Docs CSS -->
<link href="./assets/css/vendor/bootstrap-toc.css" rel="stylesheet"/>
<link href="./assets/css/vendor/prism.css" rel="stylesheet"/>
    
</head>
    
<body>  
    
    
<!----------------------------------------------------------------------
End fixed sidebar
------------------------------------------------------------------------>

<nav id="toc" class="fixedsidebar d-none d-lg-block">   
    <h5 class="mt-4 mb-4 pt-1"><a class="text-dark" href="./index.html"><strong>Anchor UI KIT</strong> Docs</a></h5>
    <a target="_blank" href="https://www.wowthemes.net/donate/" class="btn btn-primary mb-4 btn-sm btn-round"><i class="fas fa-coffee mr-1"></i> Buy me a coffee</a>
</nav>
    
<!----------------------------------------------------------------------
End fixed sidebar
------------------------------------------------------------------------> 
    
       
<main class="content-withfixedsidebar">
    
    
<!----------------------------------------------------------------------
NAVBAR (remove topnav if you don't want changed nav background on scroll)
------------------------------------------------------------------------>
<nav class="topnav navbar navbar-expand-lg navbar-dark bg-primary fixed-top">
<div class="container">
	<a class="navbar-brand d-lg-none" href="./index.html"><i class="fas fa-anchor mr-2"></i><strong>Anchor UI</strong> Kit</a>
	<button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarColor02" aria-controls="navbarColor02" aria-expanded="false" aria-label="Toggle navigation">
	<span class="navbar-toggler-icon"></span>
	</button>
	<div class="navbar-collapse collapse" id="navbarColor02">
		<ul class="navbar-nav mr-auto d-flex align-items-center">
			<li class="nav-item">
			<a class="nav-link" href="./index.html">Intro</a>
			</li>
			<li class="nav-item dropdown">
			<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
			Examples </a>
			<div class="dropdown-menu" aria-labelledby="navbarDropdown">
				<a class="dropdown-item" href="./landing.html">Home Landing</a>
				<a class="dropdown-item" href="./login.html">User Login</a>
				<a class="dropdown-item" href="./blog.html">Blog Index</a>
				<a class="dropdown-item" href="./page.html">Sample Page</a>                
			</div>
			</li>
			<li class="nav-item">
			<a class="nav-link" href="./docs.html">Docs</a>
			</li>
            <li class="d-lg-none nav-item">
            <a class="nav-link" target="_blank" href="https://www.wowthemes.net/donate/"><i class="fas fa-coffee mr-1"></i> Buy me a coffee</a>
            </li>
		</ul>
		<ul class="navbar-nav ml-auto d-flex align-items-center">
			<li class="nav-item">
			<span class="nav-link" href="#">
			<a class="btn btn-info btn-round shadow" href="#" data-toggle="modal" data-target="#modal_newsletter"><i class="fas fa-cloud-download-alt"></i> Download UI Kit <a href="https://github.com/wowthemesnet/Anchor-Bootstrap-UI-Kit/archive/master.zip" class="downloadzip" class="hidden"></a>
			</a>
			</span>
			</li>
		</ul>
	</div>
</div>
</nav>
<!-- End Navbar -->
    
<!-------------------------------------
HEADER
--------------------------------------->
<div class="jumbotron jumbotron-lg jumbotron-fluid jumbotron-lg-withnav mb-3 bg-primary position-relative">
	<div class="container text-white h-100 tofront">
		<div class="row align-items-center justify-content-center text-center">
			<div class="col-md-10">
				<h1 class="display-3">Documentation</h1>
			</div>
		</div>
	</div>
</div>
<!--- END HEADER -->

<!-- DOCS CONTENT -->
<div class="container pt-5 pb-5 mb-5">
	<div class="row justify-content-center">
      
<div class="col-lg-11">
<div id="docsarea" class="font-weight-normal">
    
<p class="lead">Hey there! You’re looking at <a href="./index.html">Anchor UI Bootstrap KIT</a> official documentation. Anchor is a free Bootstrap UI Kit with flexible, ready to use UI components which will hep you build websites faster. Let’s begin!
</p>
    
    
<section class="pt-5 mt-4 pb-5 bg-info rounded">
<div class="container text-center">
	
	<div class="d-flex">
		<div class="col">
			<a href="./login.html"><img src="assets/img/demo/screenshot4.png" class="shadow-lg"></a>
		</div>
		<div class="col">
			<a href="./blog.html"><img src="assets/img/demo/screenshot2.png" class="shadow-lg"></a>
		</div>
		<div class="col">
			<a href="./landing.html"><img src="assets/img/demo/screenshot3.png" class="shadow-lg"></a>
		</div>
	</div>
</div>
</section>
    
<h1>Quick Start</h1>    
            
<!----------------------------------------------------------------------
file structure
------------------------------------------------------------------------>
<h2>File Structure</h2>
<code>
<ul class="ascii">
    <li>assets/
        <ul>
        <li>css/
            <ul>
            <li>vendor/
                <ul>
                <li>aos.css</li>
                <li>prism.css</li>
                </ul>
            </li>
            <li>main.css</li>
            <li>main.css.map</li>
            </ul>
        </li>
        <li>img/</li>
        <li>js/
            <ul>
            <li>vendor/
                <ul>
                <li>jquery.min.js</li>
                <li>bootstrap.min.js</li>                
                <li>popper.min.js</li>
                <li>aos.js</li>
                </ul>
            </li>
            <li>functions.js</li>
            </ul>
        </li>                  
        <li>scss/
            <ul>
            <li>1-frameworks/
                <ul>
                <li>bootstrap/
                    <ul>
                        <li>source/</li>
                        <li>bootstrap.scss</li>                
                        <li>bootstrap-grid.scss</li>
                        <li>bootstrap-reboot.scss</li>
                        <li>bootstrap-user-variables.scss</li>
                    </ul>
                </li>
                <li>_index.scss</li>
                </ul>
            </li>
            <li>2-plugins</li>
            <li>3-base</li>
            <li>4-modules</li>
            <li>5-layout</li>
            </ul>
            <ul><li>main.scss</li></ul>
            
        </li>
        <li>index.html</li>
        <li>blog.html</li>
        <li>landing.html</li>
        <li>page.html</li>
        <li>login.html</li>
        <li>starter-template.html</li>
        <li>docs.html</li>
        <li>gulpfile.js</li>
        <li>package.json</li>
        <li>README.md</li>
        
        
        </ul>
    </li>
</ul>
</code>
    
<!----------------------------------------------------------------------
basic template
------------------------------------------------------------------------>
<h2>Basic Template</h2>
    
<!-- Trigger -->
<button class="btn btn-sm btn-round btncopy mb-2" data-clipboard-target="#quickstart">
    Copy to clipboard
</button>
       
<pre id="quickstart" class="language-markup">
&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
&lt;meta charset=&quot;utf-8&quot;/&gt;
&lt;link rel=&quot;apple-touch-icon&quot; sizes=&quot;76x76&quot; href=&quot;./assets/img/favicon.ico&quot;&gt;
&lt;link rel=&quot;icon&quot; type=&quot;image/png&quot; href=&quot;./assets/img/favicon.ico&quot;&gt;
&lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge,chrome=1&quot;/&gt;
&lt;title&gt;Site Title&lt;/title&gt;
&lt;meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no' name='viewport'/&gt;
    
&lt;!-- Fonts --&gt;
&lt;link href=&quot;https://fonts.googleapis.com/css?family=Nunito:300,300i,400,600,700&quot; rel=&quot;stylesheet&quot;&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;https://use.fontawesome.com/releases/v5.3.1/css/all.css&quot; integrity=&quot;sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU&quot; crossorigin=&quot;anonymous&quot;&gt;
    
&lt;!-- CSS --&gt;
&lt;link href=&quot;./assets/css/main.css&quot; rel=&quot;stylesheet&quot;/&gt;
&lt;link href=&quot;./assets/css/vendor/aos.css&quot; rel=&quot;stylesheet&quot;/&gt;
    
&lt;/head&gt;
    
&lt;body&gt; 

&lt;main&gt; My content goes here &lt;/main&gt;

&lt;!-- Javascript --&gt;
&lt;script src=&quot;./assets/js/vendor/jquery.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;./assets/js/vendor/popper.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;./assets/js/vendor/bootstrap.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;./assets/js/functions.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;

&lt;/body&gt;
    
&lt;/html&gt;

</pre>
    
<!----------------------------------------------------------------------
gulp
------------------------------------------------------------------------>
    
<h1>Install Gulp</h1>
<p>Gulp can automate tasks in your development workflow. Gulp is also required in order to work with <code>scss</code> files. In order to use Gulp you will need to download Node JS first:</p>
    
<p class="mb-3"><a href="https://nodejs.org/en/" class="btn btn-primary btn-icon" target="_blank">
    <i class="fab fa-node-js mr-2"></i> Download Node JS</a>
</p>
    
<p>After Node is installed you can now proceed to Gulp installation. To do that simply run the following command in your terminal. This will install Gulp globally. Aferwards you can cd to you project’s folder where our KIT is installed.</p>

<code>npm install gulp-cli -g</code>

<!----------------------------------------------------------------------
scss
------------------------------------------------------------------------>
    
<h1>Customize with SCSS</h1>
<p>It is highly recommended that all the customized styles to be stored only within the user’s files from the <code>scss</code> folder. Gulp is required for this. </p>
<ol>
  <li>Download the project’s zip.</li>
  <li>Make sure you have node.js (https://nodejs.org/en/) installed.</li>
  <li>Type <code class="highlighter-rouge">npm install</code> in terminal/console in the source folder where <code class="highlighter-rouge">package.json</code> is located.</li>
  <li>Make sure you have gulp <code class="highlighter-rouge">npm install gulp</code></li>
  <li>Run in terminal <code class="highlighter-rouge">gulp open-app</code> for opening the Dashboard Page (default) of the product.</li>
  <li>Run in terminal <code class="highlighter-rouge">gulp compile-scss</code> for a single compilation or <code class="highlighter-rouge">gulp watch</code> for continous compilation of the changes that you make in <code class="highlighter-rouge">*.scss</code> files. This command should be run in the same folder where <code class="highlighter-rouge">gulpfile.js</code> and <code class="highlighter-rouge">package.json</code> are located.</li>
</ol>
    
    
<div class="alert alert-orange mt-5 d-flex align-items-center">
    <div>
        <span class="align-self-center iconbox iconsmall fill rounded-circle bg-danger text-white shadow border-0 mr-2"><i class="fas fa-bullhorn"></i>
        </span>
    </div> 
    <div>When working with SCSS, you only need to these 2 files: <ul>
        <li><code>assets/scss/frameworks/bootstrap/bootstrap-user-variables.scss</code> (here you can edit or add variables)</li> 
        <li><code>assets/scss/main.scss</code> (here you will customize your style)</li>
        </ul> 
        Do not touch anything else! Everything you edit in these 2 files will be compiled in <code>main.css</code>.
    </div>
</div>
    
    

    
<h1>Components</h1>
    
<!----------------------------------------------------------------------
 colors
------------------------------------------------------------------------>
    
<h2>Colors</h2>
    
<div class="alert alert-dark mb-5">
    Options:
    <ul>
    <li>Background: <code>bg-*color</code></li>    
    <li>Text: <code>text-*color</code></li>
    <li>Alert: <code>alert-*color</code></li>    
    <li>Button: <code>btn-*color</code></li>
    <li>Badge: <code>badge-*color</code></li>
    </ul>
</div>
    
<div class="d-flex text-white align-items-center h-100 text-center">
	<div class="col-md-4 bg-primary p-5" style="height:130px;">
		<h5>Primary</h5>
	</div>
	<div class="col-md-4 bg-secondary p-5" style="height:130px;">
		<h5>Secondary</h5>
	</div>
	<div class="col-md-4 bg-info p-5" style="height:130px;">
		<h5>Info</h5>
	</div>
</div>
<div class="d-flex text-white align-items-center h-100 text-center">
	<div class="col-md-4 bg-success p-5" style="height:130px;">
		<h5>Success</h5>
	</div>
	<div class="col-md-4 bg-warning p-5" style="height:130px;">
		<h5>Warning</h5>
	</div>
	<div class="col-md-4 bg-danger p-5" style="height:130px;">
		<h5>Danger</h5>
	</div>
</div>
<div class="d-flex text-white align-items-center h-100 text-center">
	<div class="col-md-4 bg-purple p-5" style="height:130px;">
		<h5>Purple</h5>
	</div>
	<div class="col-md-4 bg-black p-5" style="height:130px;">
		<h5>Black</h5>
	</div>
	<div class="col-md-4 bg-cyan p-5" style="height:130px;">
		<h5>Cyan</h5>
	</div>
</div>
<div class="d-flex text-white align-items-center h-100 text-center">
	<div class="col-md-4 bg-white p-5 border border-right-0 border-top-0" style="height:130px;">
		<h5 class="text-dark">White</h5>
	</div>
	<div class="col-md-4 bg-orange p-5" style="height:130px;">
		<h5>Orange</h5>
	</div>
	<div class="col-md-4 bg-light p-5 border border-left-0 border-top-0" style="height:130px;">
		<h5 class="text-dark">Light</h5>
	</div>
</div>
    
<!----------------------------------------------------------------------
alerts
------------------------------------------------------------------------>
<h2>Alerts</h2>
    
<div class="alert alert-dark mb-5">
    Options:
    <ul>
    <li>Background: <code>alert-*color</code></li>    
    <li>Text: <code>text-*color</code></li>
    <li>Shadow: <code>shadow</code>, <code>shadow-sm</code>, <code>shadow-lg</code></li>
    </ul>
</div>
    
<div class="row mb-4">
<div class="col-md-6">
    <div class="alert alert-primary shadow-lg" role="alert">
         A simple primary alert-check it out!
    </div>
    <div class="alert alert-secondary" role="alert">
         A simple secondary alert-check it out!
    </div>
    <div class="alert alert-success" role="alert">
         A simple success alert-check it out!
    </div>
</div>
<div class="col-md-6">
    <div class="alert alert-danger" role="alert">
        <i class="fas fa-bullhorn"></i> A simple danger alert-check it out! <button type="button" class="close" data-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">×</span>
        </button>
    </div>
    <div class="alert alert-warning" role="alert">
         A simple warning alert-check it out! 
        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">×</span>
        </button>
    </div>
    <div class="alert alert-info" role="alert">
         A simple info alert-check it out! <button type="button" class="close" data-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">×</span>
        </button>
    </div>
</div>
</div>
    
<script type="text/plain" class="language-markup"><div class="alert alert-primary shadow-lg" role="alert">
    A simple primary alert-check it out!
</div></script>
    
<script type="text/plain" class="language-markup"><div class="alert alert-danger" role="alert">
    <i class="fas fa-bullhorn"></i> A simple danger alert-check it out! <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">×</span>
    </button>
</div></script>
    
<!----------------------------------------------------------------------
animations
------------------------------------------------------------------------>
    
<h2>Animations</h2>
    
<div class="alert alert-dark mb-5">
    Options:
<ul>
<li>
Fade animations:
<ul>
<li>fade</li>
<li>fade-up</li>
<li>fade-down</li>
<li>fade-left</li>
<li>fade-right</li>
<li>fade-up-right</li>
<li>fade-up-left</li>
<li>fade-down-right</li>
<li>fade-down-left</li>
</ul>
</li>
<li>
Flip animations:
<ul>
<li>flip-up</li>
<li>flip-down</li>
<li>flip-left</li>
<li>flip-right</li>
</ul>
</li>
<li>
Slide animations:
<ul>
<li>slide-up</li>
<li>slide-down</li>
<li>slide-left</li>
<li>slide-right</li>
</ul>
</li>
<li>
Zoom animations:
<ul>
<li>zoom-in</li>
<li>zoom-in-up</li>
<li>zoom-in-down</li>
<li>zoom-in-left</li>
<li>zoom-in-right</li>
<li>zoom-out</li>
<li>zoom-out-up</li>
<li>zoom-out-down</li>
<li>zoom-out-left</li>
<li>zoom-out-right</li>
</ul>
</li>
</ul>
</div>
    
<div class="alert alert-dark mb-5">
Call: <code>AOS.init({ duration: 800 });</code>
</div>
    
<p>Add animation effect with <code>data-aos="*animation"</code>. Example:</p>
    
<script type="text/plain" class="language-markup"><p data-aos="fade-left">This is from left.</p>    
<p data-aos="fade-right">This is from right.</p>    
<p data-aos="fade-down">This is from down.</p>    
<p data-aos="fade-up">This is from up.</p></script>
    
<!----------------------------------------------------------------------
avatars
------------------------------------------------------------------------>
    
<h2>Avatars</h2>
    
<div class="alert alert-dark mb-5">
    Options:
    <ul>
    <li>Round: <code>rounded-circle</code></li>    
    <li>Size: <code>width="*"</code></li>
    <li>Shadow: <code>shadow</code>, <code>shadow-sm</code>, <code>shadow-lg</code></li>
    </ul>
</div> 
    
<div class="mb-3">
<img class="rounded-circle shadow" src="assets/img/demo/avatar2.jpg" width="50">
<img class="rounded-circle shadow" src="assets/img/demo/avatar2.jpg" width="70">
<img class="rounded-circle shadow" src="assets/img/demo/avatar2.jpg" width="90">
</div>
    
<script type="text/plain" class="language-markup"><img class="rounded-circle shadow" src="assets/img/demo/avatar2.jpg" width="50">
<img class="rounded-circle shadow" src="assets/img/demo/avatar2.jpg" width="70">
<img class="rounded-circle shadow" src="assets/img/demo/avatar2.jpg" width="90">
</script>

<!----------------------------------------------------------------------
badges
------------------------------------------------------------------------>
<h2>Badges</h2>
    
<div class="alert alert-dark mb-5">
    Options:
    <ul>
    <li>Background: <code>badge-*color</code></li>    
    <li>Text: <code>text-*color</code></li>
    <li>Shadow: <code>shadow</code>, <code>shadow-sm</code>, <code>shadow-lg</code></li>
    </ul>
</div>    
    
<div class="row">
	<div class="col-md-12">
		<span class="badge badge-pill badge-primary">Primary</span>
		<span class="badge badge-pill badge-secondary">Secondary</span>
		<span class="badge badge-pill badge-success">Success</span>
		<span class="badge badge-pill badge-danger">Danger</span>
		<span class="badge badge-pill badge-warning">Warning</span>
		<span class="badge badge-pill badge-info">Info</span>
        <a class="btn btn-primary" href="#">
			Profile <span class="badge badge-warning ml-2">15%</span>
			</a>
	</div>
</div>
    
<script type="text/plain" class="language-markup"><span class="badge badge-pill badge-primary">Primary</span>
</script>
    
<script type="text/plain" class="language-markup"><a class="btn btn-primary" href="#">Profile <span class="badge badge-warning ml-2">15%</span></a></script>


<!----------------------------------------------------------------------
buttons
------------------------------------------------------------------------>
<h2>Buttons</h2>
    
<div class="alert alert-dark mb-5">
    Options
    <ul>
    <li>Background: <code>btn-*color</code></li>    
    <li>Text: <code>text-*color</code></li>
    <li>Size: <code>btn-sm</code>, <code>btn</code>, <code>btn-lg</code></li>
    <li>Outline: <code>btn-outline-*color</code></li>
    <li>Round: <code>btn-round</code></li>
    <li>Width: <code>btn-block w-100</code></li>
    <li>Shadow: <code>shadow</code>, <code>shadow-sm</code>, <code>shadow-lg</code></li>
    </ul>
</div> 
    
<div class="row mb-4">
<div class="col-md-3">
<a href="#" class="btn btn-block btn-primary mb-2">Default</a>
</div>
    
<div class="col">
<a href="#" class="btn btn-block btn-outline-primary mb-2">Outline</a>
</div>
    
<div class="col">
<a href="#" class="btn btn-block btn-primary btn-round mb-2 shadow-lg">Round</a>
</div>
    
<div class="col">
<a href="#" class="btn btn-block btn-outline-primary btn-round mb-2">Outline</a>
</div>
</div>    

<script type="text/plain" class="language-markup"><a href="#" class="btn btn-primary">Default</a>
<a href="#" class="btn btn-outline-primary">Outline</a>
<a href="#" class="btn btn-primary btn-round shadow-lg">Round</a>
<a href="#" class="btn btn-outline-primary btn-round">Outline Round</a>
</script>

<!----------------------------------------------------------------------
cta
------------------------------------------------------------------------>
    
<h2>Call to action</h2>
    
<div class="alert alert-dark mb-5">
    Options
    <ul>
    <li>Background: <code>bg-*color</code></li>    
    <li>Text: <code>text-*color</code></li>
    <li>Shadow: <code>shadow</code>, <code>shadow-sm</code>, <code>shadow-lg</code></li>
    <li>Not round: <code>jumbotron-fluid</code></li>
    </ul>
</div>
    

<div class="jumbotron p-5 jumbotron-fluid bg-primary">
	<div class="container h-100">
		<div class="row justify-content-between align-items-center text-md-center text-lg-left">
			<div class="col-lg-9">
				<h5 class="font-weight-light text-white">Free Bootstrap 4.1.3<strong> UI Kit</strong> with <strong><i class="fab fa-sass fa-2x"></i></strong> for rapid development</h5>
			</div>
			<div class="col-lg-3 text-md-center text-lg-right mt-4 mb-4">
				<a href="#" class="btn btn-lg btn-info">Call to action</a>
			</div>
		</div>
	</div>
</div>
    
<script type="text/plain" class="language-markup"><!-- Call to action -->
<div class="jumbotron p-5 jumbotron-fluid bg-primary">
	<div class="container h-100">
		<div class="row justify-content-between align-items-center text-md-center text-lg-left">
			<div class="col-lg-9">
				<h5 class="font-weight-light text-white">Free Bootstrap 4.1.3<strong> UI Kit</strong> with <strong><i class="fab fa-sass fa-2x"></i></strong> for rapid development</h5>
			</div>
			<div class="col-lg-3 text-md-center text-lg-right mt-4 mb-4">
				<a href="#" class="btn btn-lg btn-info">Call to action</a>
			</div>
		</div>
	</div>
</div></script>
    
<br/>
    
<div class="jumbotron p-5 jumbotron-fluid bg-info">
	<div class="container text-center h-100">
		<h5 class="font-weight-light mb-4">Free Bootstrap 4.1.3<strong> UI Kit</strong> with <strong><i class="fab fa-sass fa-2x"></i></strong> for rapid development</h5>
		<a href="#" class="btn btn-lg btn-primary">Call to action</a>
	</div>
</div>
    
<script type="text/plain" class="language-markup"><!-- Call to action -->
<div class="jumbotron p-5 jumbotron-fluid bg-info">
	<div class="container text-center h-100">
		<h5 class="font-weight-light mb-4">Free Bootstrap 4.1.3<strong> UI Kit</strong> with <strong><i class="fab fa-sass fa-2x"></i></strong> for rapid development</h5>
		<a href="#" class="btn btn-lg btn-primary">Call to action</a>
	</div>
</div></script>
    
    
<br/>
    
<div class="jumbotron p-5 jumbotron-fluid bg-warning">
	<div class="container h-100">
		<div class="row justify-content-between align-items-center text-md-center text-lg-left">
			<div class="col-lg-9">
				<h5 class="font-weight-light text-dark">Free Bootstrap 4.1.3<strong> UI Kit</strong> with <strong><i class="fab fa-sass fa-2x"></i></strong> for rapid development</h5>
			</div>
			<div class="col-lg-3 text-md-center text-lg-right mt-4 mb-4">
				<a href="#" class="btn btn-lg btn-outline-dark">Call to action</a>
			</div>
		</div>
	</div>
</div>
    
<script type="text/plain" class="language-markup"><!-- Call to action -->
<div class="jumbotron p-5 jumbotron-fluid bg-warning">
	<div class="container h-100">
		<div class="row justify-content-between align-items-center text-md-center text-lg-left">
			<div class="col-lg-9">
				<h5 class="font-weight-light text-dark">Free Bootstrap 4.1.3<strong> UI Kit</strong> with <strong><i class="fab fa-sass fa-2x"></i></strong> for rapid development</h5>
			</div>
			<div class="col-lg-3 text-md-center text-lg-right mt-4 mb-4">
				<a href="#" class="btn btn-lg btn-outline-dark">Call to action</a>
			</div>
		</div>
	</div>
</div></script>
    
    
    
<!----------------------------------------------------------------------
cards
------------------------------------------------------------------------> 
    
    
<h2>Cards</h2>  
    
<div class="alert alert-dark mb-5">
    Options
    <ul>
    <li>Shadow: <code>shadow</code>, <code>shadow-sm</code>, <code>shadow-lg</code></li>
    <li>No border: <code>border-0</code></li>
    <li>No rounded: <code>rounded-0</code></li>
    </ul>
</div>

<div class="row mb-5">
<div class="col-lg-6  mt-5">
     <p><b>Author Card</b></p>
		<div class="card shadow-sm border-0">
			<img class="card-img-top" src="./assets/img/demo/1.jpg" alt="Card image cap">
			<div class="card-body text-center">
				<img class="rounded-circle shadow mt-neg5" src="assets/img/demo/avatar.png" width="70">
				<h5 class="card-title">Sal</h5>
				<p class="card-text text-muted">
					 Hi, I am the author of Anchor Bootstrap UI Kit @wowthemesnet.
				</p>
				<div class="text-center">
					<a target="_blank" href="https://facebook.com/wowthemesnet/"><span class="iconbox iconsmall rounded-circle bg-secondary text-white mr-1"><i class="fab fa-facebook-f"></i></span></a>
					<a target="_blank" href="https://twitter.com/wowthemesnet"><span class="iconbox iconsmall rounded-circle bg-info text-white mr-1"><i class="fab fa-twitter"></i></span></a>
					<a target="_blank" href="https://github.com/wowthemesnet"><span class="iconbox iconsmall rounded-circle bg-dark text-white"><i class="fab fa-github"></i></span></a>
				</div>
			</div>
		</div>    
</div>
<div class="col-lg-6  mt-5">
         <p><b>Simple Card</b></p>
		<div class="card shadow-sm border-0">
			<img class="card-img-top" src="./assets/img/demo/2.jpg" alt="Card image cap">
			<div class="card-body">
				<h5 class="card-title">Just a card</h5>
				<p class="card-text text-muted">
					 Some quick example text to build on the card title and make up the bulk of the card's content.
				</p>
				<a href="#" class="btn btn-info btn-round">Read More</a>
			</div>
		</div>
	</div>
    <div class="col-xl-6 mt-5">
         <p><b>Card Overlay</b></p>
		<div class="card bg-dark overlay overlay-black text-white shadow-lg border-0">
			<img class="card-img" src="./assets/img/demo/7.jpg" alt="Card image">
			<div class="card-img-overlay d-flex align-items-center text-center p-5">
				<div class="card-body">
					<h3 class="card-title">Overlay center align</h3>
					<p class="card-text text-muted">
						 With supporting text below as a natural lead-in to additional content.
					</p>
					<a href="#" class="btn btn-info btn-round">Do anything</a>
				</div>
			</div>
		</div>
	</div>
    <div class="col-xl-6 mt-5">
            <p><b>Featured Blog Card</b></p>
			<div class="card flex-md-row mb-4 box-shadow h-xl-300">
				<div class="card-body d-flex flex-column align-items-start">
					<strong class="d-inline-block mb-2 text-purple">Business</strong>
					<h3 class="mb-0">
					<a class="text-dark" href="#">Living the Dream on a Sunny Island</a>
					</h3>
					<div class="mb-1 text-muted">
						Nov 12
					</div>
					<p class="card-text mb-auto">
						This is a wider card with supporting text below as a natural lead-in to additional content.
					</p>
					<a class="text-gray" href="#">Continue reading</a>
				</div>
				<img class="card-img-right flex-auto d-none d-md-block" src="assets/img/demo/blog1.jpg">
			</div>
		</div>
</div> 
    
    
<script type="text/plain" class="language-markup"><!-- Author Card -->
<div class="card shadow-sm border-0">
<img class="card-img-top" src="./assets/img/demo/1.jpg" alt="Card image cap">
<div class="card-body text-center">
    <img class="rounded-circle shadow mt-neg5" src="./assets/img/demo/avatar.png" width="70">
    <h5 class="card-title">Sal</h5>
    <p class="card-text text-muted">
         Hi, I am the author of Anchor Bootstrap UI Kit @wowthemesnet.
    </p>
    <div class="text-center">
        <a target="_blank" href="#"><span class="iconbox iconsmall rounded-circle bg-secondary text-white mr-1"><i class="fab fa-facebook-f"></i></span></a>
        <a target="_blank" href="#"><span class="iconbox iconsmall rounded-circle bg-info text-white mr-1"><i class="fab fa-twitter"></i></span></a>
        <a target="_blank" href="#"><span class="iconbox iconsmall rounded-circle bg-dark text-white"><i class="fab fa-github"></i></span></a>
    </div>
</div>
</div></script>
    
<br/>
    
<script type="text/plain" class="language-markup"><!-- Simple Card -->
<div class="card shadow-sm border-0">
    <img class="card-img-top" src="./assets/img/demo/2.jpg" alt="Card image cap">
    <div class="card-body">
        <h5 class="card-title">Just a card</h5>
        <p class="card-text text-muted">
             Some quick example text.
        </p>
        <a href="#" class="btn btn-info btn-round">Read More</a>
    </div>
</div></script>
    
<br/>
    
<script type="text/plain" class="language-markup"><!-- Card Overlay -->
<div class="card bg-dark overlay overlay-black text-white shadow-lg border-0">
    <img class="card-img" src="./assets/img/demo/7.jpg" alt="Card image">
    <div class="card-img-overlay d-flex align-items-center text-center">
        <div class="card-body">
            <h3 class="card-title">Overlay center align</h3>
            <p class="card-text text-muted">
                 With supporting text below as a natural lead-in to additional content.
            </p>
            <a href="#" class="btn btn-info btn-round">Do anything</a>
        </div>
    </div>
</div></script>
    
<br/>
<script type="text/plain" class="language-markup"><!-- Featured Card Blog -->
<div class="card flex-md-row mb-4 box-shadow h-xl-300">
    <div class="card-body d-flex flex-column align-items-start">
        <strong class="d-inline-block mb-2 text-purple">Business</strong>
        <h3 class="mb-0">
        <a class="text-dark" href="#">Living the Dream on a Sunny Island</a>
        </h3>
        <div class="mb-1 text-muted">
            Nov 12
        </div>
        <p class="card-text mb-auto">
            This is a wider card with supporting text below as a natural lead-in to additional content.
        </p>
        <a class="text-gray" href="#">Continue reading</a>
    </div>
    <img class="card-img-right flex-auto d-none d-md-block" src="assets/img/demo/blog1.jpg">
</div>
</script>
    
<!----------------------------------------------------------------------
carousel
------------------------------------------------------------------------>
    
<h2>Carousel</h2>
    
<div class="alert alert-dark mb-5">
    Options
    <ul>
    <li>Shadow: <code>shadow</code>, <code>shadow-sm</code>, <code>shadow-lg</code></li>
    <li>Rounded: <code>rounded</code></li>
    </ul>
</div>
    
<div class="alert alert-dark mb-5">
    Images with non-equal heights may cause a jump effect. Here's the call for a smooth transition:
    <code>    $('.carousel').on('slide.bs.carousel', function (event) {
      var height = $(event.relatedTarget).height();
      var $innerCarousel = $(event.target).find('.carousel-inner');
      $innerCarousel.animate({
        height: height
      });
    });
</code>
</div>
    
<div id="carouselExampleIndicators" class="carousel slide carousel-fade" data-ride="carousel">
<ol class="carousel-indicators">
    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner shadow-sm rounded">
    <div class="carousel-item active">
        <img class="d-block w-100" src="assets/img/demo/slide1.jpg" alt="First slide">
        <div class="carousel-caption d-none d-md-block">
            <h5>Mountains, Nature Collection</h5>
        </div>
    </div>
    <div class="carousel-item">
        <img class="d-block w-100" src="assets/img/demo/slide2.jpg" alt="Second slide">
        <div class="carousel-caption d-none d-md-block">
            <h5>Freedom, Sea Collection</h5>
        </div>
    </div>
    <div class="carousel-item">
        <img class="d-block w-100" src="assets/img/demo/slide3.jpg" alt="Third slide">
        <div class="carousel-caption d-none d-md-block">
            <h5>Living the Dream, Lost Island</h5>
        </div>
    </div>
</div>
</div>
    
<br/>
    
<script type="text/plain" class="language-markup"><div id="carouselExampleIndicators" class="carousel slide carousel-fade" data-ride="carousel">
<ol class="carousel-indicators">
    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner shadow-sm rounded">
    <div class="carousel-item active">
        <img class="d-block w-100" src="assets/img/demo/slide1.jpg" alt="First slide">
        <div class="carousel-caption d-none d-md-block">
            <h5>Mountains, Nature Collection</h5>
        </div>
    </div>
    <div class="carousel-item">
        <img class="d-block w-100" src="assets/img/demo/slide2.jpg" alt="Second slide">
        <div class="carousel-caption d-none d-md-block">
            <h5>Freedom, Sea Collection</h5>
        </div>
    </div>
    <div class="carousel-item">
        <img class="d-block w-100" src="assets/img/demo/slide3.jpg" alt="Third slide">
        <div class="carousel-caption d-none d-md-block">
            <h5>Living the Dream, Lost Island</h5>
        </div>
    </div>
</div>
</div></script>
    
<!----------------------------------------------------------------------
footer
------------------------------------------------------------------------>
    
<h2>Footer</h2>
<div class="alert alert-dark mb-5">
    Options
    <ul>
    <li>Background: <code>bg-*color</code> (apply to <code>footer</code> and <code>svg</code> classes.</li>
    <li>Text Color: <code>text-*color</code></li>
    </ul>
</div>
    
<p><b>Dark Footer</b></p>
    
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1440 126" style="enable-background:new 0 0 1440 126;" xml:space="preserve">
<path class="bg-black" d="M685.6,38.8C418.7-11.1,170.2,9.9,0,30v96h1440V30C1252.7,52.2,1010,99.4,685.6,38.8z"></path>
</svg>
<footer class="bg-black pb-5">
<div class="container">
	<div class="row">
		<div class="col-12 col-md mr-4">
			<i class="fas fa-copyright text-white"></i>
			<small class="d-block mt-3 mb-3 text-muted">© 2021 Anchor Bootstrap</small>
		</div>
		<div class="col-6 col-md">
			<h5 class="mb-4 text-white">Features</h5>
			<ul class="list-unstyled text-small">
				<li><a class="text-muted" href="#">Cool stuff</a></li>
				<li><a class="text-muted" href="#">Random feature</a></li>
				<li><a class="text-muted" href="#">Team feature</a></li>
				<li><a class="text-muted" href="#">Stuff for developers</a></li>
			</ul>
		</div>
		<div class="col-6 col-md">
			<h5 class="mb-4 text-white">Resources</h5>
			<ul class="list-unstyled text-small">
				<li><a class="text-muted" href="#">Resource</a></li>
				<li><a class="text-muted" href="#">Resource name</a></li>
				<li><a class="text-muted" href="#">Another resource</a></li>
				<li><a class="text-muted" href="#">Final resource</a></li>
			</ul>
		</div>
		<div class="col-6 col-md">
			<h5 class="mb-4 text-white">Utilities</h5>
			<ul class="list-unstyled text-small">
				<li><a class="text-muted" href="#">Business</a></li>
				<li><a class="text-muted" href="#">Education</a></li>
				<li><a class="text-muted" href="#">Government</a></li>
				<li><a class="text-muted" href="#">Gaming</a></li>
			</ul>
		</div>
		<div class="col-6 col-md">
			<h5 class="mb-4 text-white">About</h5>
			<ul class="list-unstyled text-small">
				<li><a class="text-muted" href="#">Team</a></li>
				<li><a class="text-muted" href="#">Locations</a></li>
				<li><a class="text-muted" href="#">Privacy</a></li>
				<li><a class="text-muted" href="#">Terms</a></li>
			</ul>
		</div>
	</div>
</div>
</footer>
    
<br>
    
<script type="text/plain" class="language-markup"><!-- dark footer -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1440 126" style="enable-background:new 0 0 1440 126;" xml:space="preserve">
<path class="bg-black" d="M685.6,38.8C418.7-11.1,170.2,9.9,0,30v96h1440V30C1252.7,52.2,1010,99.4,685.6,38.8z"></path>
</svg>
<footer class="bg-black pb-5">
<div class="container">
	<div class="row">
		<div class="col-12 col-md mr-4">
			<i class="fas fa-copyright text-white"></i>
			<small class="d-block mt-3 mb-3 text-muted">© 2021 Anchor Bootstrap</small>
		</div>
		<div class="col-6 col-md">
			<h5 class="mb-4 text-white">Features</h5>
			<ul class="list-unstyled text-small">
				<li><a class="text-muted" href="#">Cool stuff</a></li>
				<li><a class="text-muted" href="#">Random feature</a></li>
				<li><a class="text-muted" href="#">Team feature</a></li>
				<li><a class="text-muted" href="#">Stuff for developers</a></li>
			</ul>
		</div>
		<div class="col-6 col-md">
			<h5 class="mb-4 text-white">Resources</h5>
			<ul class="list-unstyled text-small">
				<li><a class="text-muted" href="#">Resource</a></li>
				<li><a class="text-muted" href="#">Resource name</a></li>
				<li><a class="text-muted" href="#">Another resource</a></li>
				<li><a class="text-muted" href="#">Final resource</a></li>
			</ul>
		</div>
		<div class="col-6 col-md">
			<h5 class="mb-4 text-white">Utilities</h5>
			<ul class="list-unstyled text-small">
				<li><a class="text-muted" href="#">Business</a></li>
				<li><a class="text-muted" href="#">Education</a></li>
				<li><a class="text-muted" href="#">Government</a></li>
				<li><a class="text-muted" href="#">Gaming</a></li>
			</ul>
		</div>
		<div class="col-6 col-md">
			<h5 class="mb-4 text-white">About</h5>
			<ul class="list-unstyled text-small">
				<li><a class="text-muted" href="#">Team</a></li>
				<li><a class="text-muted" href="#">Locations</a></li>
				<li><a class="text-muted" href="#">Privacy</a></li>
				<li><a class="text-muted" href="#">Terms</a></li>
			</ul>
		</div>
	</div>
</div>
</footer></script>
    
<br>

<p><b>Light Footer</b></p>
    
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1440 126" style="enable-background:new 0 0 1440 126;" xml:space="preserve">
<path class="bg-light" d="M685.6,38.8C418.7-11.1,170.2,9.9,0,30v96h1440V30C1252.7,52.2,1010,99.4,685.6,38.8z"></path>
</svg>
<footer class="bg-light pb-5">
<div class="container">
	<div class="row">
		<div class="col-12 col-md mr-4">
			<i class="fas fa-copyright text-dark"></i>
			<small class="d-block mt-3 mb-3 text-muted">© 2021 Anchor Bootstrap</small>
		</div>
		<div class="col-6 col-md">
			<h5 class="mb-4 text-dark">Features</h5>
			<ul class="list-unstyled text-small">
				<li><a class="text-muted" href="#">Cool stuff</a></li>
				<li><a class="text-muted" href="#">Random feature</a></li>
				<li><a class="text-muted" href="#">Team feature</a></li>
				<li><a class="text-muted" href="#">Stuff for developers</a></li>
			</ul>
		</div>
		<div class="col-6 col-md">
			<h5 class="mb-4 text-dark">Resources</h5>
			<ul class="list-unstyled text-small">
				<li><a class="text-muted" href="#">Resource</a></li>
				<li><a class="text-muted" href="#">Resource name</a></li>
				<li><a class="text-muted" href="#">Another resource</a></li>
				<li><a class="text-muted" href="#">Final resource</a></li>
			</ul>
		</div>
		<div class="col-6 col-md">
			<h5 class="mb-4 text-dark">Utilities</h5>
			<ul class="list-unstyled text-small">
				<li><a class="text-muted" href="#">Business</a></li>
				<li><a class="text-muted" href="#">Education</a></li>
				<li><a class="text-muted" href="#">Government</a></li>
				<li><a class="text-muted" href="#">Gaming</a></li>
			</ul>
		</div>
		<div class="col-6 col-md">
			<h5 class="mb-4 text-dark">About</h5>
			<ul class="list-unstyled text-small">
				<li><a class="text-muted" href="#">Team</a></li>
				<li><a class="text-muted" href="#">Locations</a></li>
				<li><a class="text-muted" href="#">Privacy</a></li>
				<li><a class="text-muted" href="#">Terms</a></li>
			</ul>
		</div>
	</div>
</div>
</footer>
    
<br>
    
<script type="text/plain" class="language-markup"><!-- light footer -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1440 126" style="enable-background:new 0 0 1440 126;" xml:space="preserve">
<path class="bg-light" d="M685.6,38.8C418.7-11.1,170.2,9.9,0,30v96h1440V30C1252.7,52.2,1010,99.4,685.6,38.8z"></path>
</svg>
<footer class="bg-light pb-5">
<div class="container">
	<div class="row">
		<div class="col-12 col-md mr-4">
			<i class="fas fa-copyright text-dark"></i>
			<small class="d-block mt-3 mb-3 text-muted">© 2021 Anchor Bootstrap</small>
		</div>
		<div class="col-6 col-md">
			<h5 class="mb-4 text-dark">Features</h5>
			<ul class="list-unstyled text-small">
				<li><a class="text-muted" href="#">Cool stuff</a></li>
				<li><a class="text-muted" href="#">Random feature</a></li>
				<li><a class="text-muted" href="#">Team feature</a></li>
				<li><a class="text-muted" href="#">Stuff for developers</a></li>
			</ul>
		</div>
		<div class="col-6 col-md">
			<h5 class="mb-4 text-dark">Resources</h5>
			<ul class="list-unstyled text-small">
				<li><a class="text-muted" href="#">Resource</a></li>
				<li><a class="text-muted" href="#">Resource name</a></li>
				<li><a class="text-muted" href="#">Another resource</a></li>
				<li><a class="text-muted" href="#">Final resource</a></li>
			</ul>
		</div>
		<div class="col-6 col-md">
			<h5 class="mb-4 text-dark">Utilities</h5>
			<ul class="list-unstyled text-small">
				<li><a class="text-muted" href="#">Business</a></li>
				<li><a class="text-muted" href="#">Education</a></li>
				<li><a class="text-muted" href="#">Government</a></li>
				<li><a class="text-muted" href="#">Gaming</a></li>
			</ul>
		</div>
		<div class="col-6 col-md">
			<h5 class="mb-4 text-dark">About</h5>
			<ul class="list-unstyled text-small">
				<li><a class="text-muted" href="#">Team</a></li>
				<li><a class="text-muted" href="#">Locations</a></li>
				<li><a class="text-muted" href="#">Privacy</a></li>
				<li><a class="text-muted" href="#">Terms</a></li>
			</ul>
		</div>
	</div>
</div>
</footer></script>
    
<br>

<p><b>Minimal Footer</b></p>
<footer class="bg-black pb-5 pt-4">
<div class="container">
	<div class="row justify-content-center text-center">
		<div class="col-md-12">			
			<span class="d-block mt-3 text-gray">©	2018 Anchor Bootstrap UI Kit, made with <i class="fas fa-heart text-danger"></i> by <a target="_blank" href="https://www.wowthemes.net">WowThemes.net</a>. 
            </span>
		</div>
	</div>
</div>
</footer>
<br>
<script type="text/plain" class="language-markup"><!-- minimal footer -->
<footer class="bg-black pb-5 pt-4">
<div class="container">
	<div class="row justify-content-center text-center">
		<div class="col-md-12">			
			<span class="d-block mt-3 text-gray">©	2018 Anchor Bootstrap UI Kit, made with <i class="fas fa-heart text-danger"></i> by <a target="_blank" href="https://www.wowthemes.net">WowThemes.net</a>. 
            </span>
		</div>
	</div>
</div>
</footer></script>
    
<!----------------------------------------------------------------------
forms
------------------------------------------------------------------------>
    
<h2>Forms</h2>
    
<div class="alert alert-dark mb-5">
    Options
    <ul>
    <li>Rounded: <code>input-round</code></li>
    </ul>
</div>
    
<p><b>Inline Form</b></p>
    
<div class="row">
    <div class="col">
        <input type="text" class="form-control input-round" placeholder="First name">
    </div>
    <div class="col">
        <input type="text" class="form-control input-round" placeholder="Last name">
    </div>
    <div class="col">
        <button type="submit" class="btn btn-primary btn-round">Subscribe</button>
    </div>
</div>
    
<br/>
    
<script type="text/plain" class="language-markup"><div class="row">
    <div class="col">
        <input type="text" class="form-control input-round" placeholder="First name">
    </div>
    <div class="col">
        <input type="text" class="form-control input-round" placeholder="Last name">
    </div>
    <div class="col">
        <button type="submit" class="btn btn-primary btn-round">Subscribe</button>
    </div>
</div></script>
    
<br/>
    
<p><b>Sign Up Form</b></p>
    
<div class="col-md-4">
<form>
<div class="form-group">
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email" required="">
    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password" required="">
</div>
<div class="form-group form-check">
    <input type="checkbox" class="form-check-input" id="exampleCheck1">
    <label class="form-check-label" for="exampleCheck1">Check me out</label>
</div>
<button type="submit" class="btn btn-success btn-round d-block w-100">Sign in</button>
</form>
</div>
    
<br/>
    
<script type="text/plain" class="language-markup"><form>
<div class="form-group">
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email" required="">
    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password" required="">
</div>
<div class="form-group form-check">
    <input type="checkbox" class="form-check-input" id="exampleCheck1">
    <label class="form-check-label" for="exampleCheck1">Check me out</label>
</div>
<button type="submit" class="btn btn-success btn-round">Sign in</button>
</form></script>
    
<br/>
    
<p><b>Contact Form</b></p>
<form>
<div class="row form-group">
    <div class="col">
        <input type="text" class="form-control" placeholder="First name">
    </div>
    <div class="col">
        <input type="text" class="form-control" placeholder="Last name">
    </div>
</div>
<div class="form-group">
    <textarea class="form-control" id="exampleFormControlTextarea1" rows="6"></textarea>
</div>
<button type="submit" class="btn btn-primary btn-round">Submit</button>
</form>

<br/>
    
<script type="text/plain" class="language-markup"><form>
<div class="row form-group">
    <div class="col">
        <input type="text" class="form-control" placeholder="First name">
    </div>
    <div class="col">
        <input type="text" class="form-control" placeholder="Last name">
    </div>
</div>
<div class="form-group">
    <textarea class="form-control" id="exampleFormControlTextarea1" rows="6"></textarea>
</div>
<button type="submit" class="btn btn-primary btn-round">Submit</button>
</form></script>
    
<!----------------------------------------------------------------------
features
------------------------------------------------------------------------>
    
<h2>Features</h2>
    
<div class="row">
    <div class="col-md-4">
        <div class="media">
            <div class="iconbox iconmedium rounded-circle text-info mr-4">
                <i class="fab fa-html5"></i>
            </div>
            <div class="media-body">
                <h5>Responsive</h5>
                <p class="text-muted">
                     Your website works on any device: desktop, tablet or mobile. It will look great!
                </p>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="media">
            <div class="iconbox iconmedium rounded-circle text-purple mr-4">
                <i class="fab fa-gulp"></i>
            </div>
            <div class="media-body">
                <h5>Gulp</h5>
                <p class="text-muted">
                     You can easily read, edit, and write your own code, or change everything.
                </p>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="media">
            <div class="iconbox iconmedium rounded-circle text-info mr-4">
                <i class="fab fa-amazon"></i>
            </div>
            <div class="media-body">
                <h5>UI Kit</h5>
                <p class="text-muted">
                     There is a bunch of useful and necessary elements for developing your website.
                </p>
            </div>
        </div>
    </div>
</div>
    
<br/>
    
<script type="text/plain" class="language-markup"><div class="row">
    <div class="col-md-4">
        <div class="media">
            <div class="iconbox iconmedium rounded-circle text-info mr-4">
                <i class="fab fa-html5"></i>
            </div>
            <div class="media-body">
                <h5>Responsive</h5>
                <p class="text-muted">
                     Your website works on any device: desktop, tablet or mobile.
                </p>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="media">
            <div class="iconbox iconmedium rounded-circle text-purple mr-4">
                <i class="fab fa-gulp"></i>
            </div>
            <div class="media-body">
                <h5>Gulp</h5>
                <p class="text-muted">
                     You can easily read, edit, and write your own code, or change everything.
                </p>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="media">
            <div class="iconbox iconmedium rounded-circle text-info mr-4">
                <i class="fab fa-amazon"></i>
            </div>
            <div class="media-body">
                <h5>UI Kit</h5>
                <p class="text-muted">
                     There is a bunch of useful and necessary elements for developing your website.
                </p>
            </div>
        </div>
    </div>
</div></script>
    
<!----------------------------------------------------------------------
headers
------------------------------------------------------------------------>
    
<h2>Headers</h2>
    
<div class="alert alert-dark mb-5">
    Options:
    <ul>
    <li>Background color: <code>bg-*color</code> (apply to <code>jumbotron</code> & <code>svg</code> classes)</li>
    <li>Text color: <code>text-*color</code></li>
    </ul>
</div>


<p><strong>Wavy Header</strong></p>    
  
<div class="jumbotron jumbotron-lg jumbotron-fluid mb-0 pb-5 bg-primary position-relative">
    <div class="container-fluid text-white h-100">
        <div class="d-lg-flex align-items-center justify-content-between text-center pl-lg-5">
            <div class="col pt-4 pb-4">
                <h3 class="display-3">Build something <strong>nice</strong> &amp; easy</h3>
                <h5 class="font-weight-light mb-4">With this FREE Bootstrap 4.1.3<strong> UI Kit</strong> &amp; <strong><i class="fab fa-sass fa-2x text-info"></i></strong></h5>
                <a href="#" class="btn btn-lg btn-outline-white btn-round">Learn more</a>
            </div>
            <div class="col align-self-bottom align-items-right text-right">
                <img src="assets/img/demo/dashb2.png" class="rounded img-fluid">
            </div>
        </div>
    </div>
</div>
<svg style="-webkit-transform:rotate(-180deg); -moz-transform:rotate(-180deg); -o-transform:rotate(-180deg); transform:rotate(-180deg); margin-top: -1px;" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewbox="0 0 1440 126" style="enable-background:new 0 0 1440 126;" xml:space="preserve">
<path class="bg-primary" d="M685.6,38.8C418.7-11.1,170.2,9.9,0,30v96h1440V30C1252.7,52.2,1010,99.4,685.6,38.8z"/>
</svg>

<script type="text/plain" class="language-markup"><!-- wavy header -->
<div class="jumbotron jumbotron-lg jumbotron-fluid mb-0 pb-3 bg-primary position-relative">
    <div class="container-fluid text-white h-100">
        <div class="d-lg-flex align-items-center justify-content-between text-center pl-lg-5">
            <div class="col pt-4 pb-4">
                <h1 class="display-3">Build something <strong>nice</strong> &amp; easy</h1>
                <h5 class="font-weight-light mb-4">With this FREE Bootstrap 4.1.3<strong> UI Kit</strong> &amp; <strong><i class="fab fa-sass fa-2x text-info"></i></strong></h5>
                <a href="#" class="btn btn-lg btn-outline-white btn-round">Learn more</a>
            </div>
            <div class="col align-self-bottom align-items-right text-right">
                <img src="assets/img/demo/dashb2.png" class="rounded img-fluid">
            </div>
        </div>
    </div>
</div>
<svg style="-webkit-transform:rotate(-180deg); -moz-transform:rotate(-180deg); -o-transform:rotate(-180deg); transform:rotate(-180deg); margin-top: -1px;" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewbox="0 0 1440 126" style="enable-background:new 0 0 1440 126;" xml:space="preserve">
<path class="bg-primary" d="M685.6,38.8C418.7-11.1,170.2,9.9,0,30v96h1440V30C1252.7,52.2,1010,99.4,685.6,38.8z"/>
</svg></script>
    
<br/>

<p><strong>Simple Header</strong></p>
    
<div class="jumbotron jumbotron-lg jumbotron-fluid mb-3 bg-primary position-relative">
	<div class="container text-white h-100 tofront">
		<div class="row align-items-center justify-content-center text-center">
			<div class="col-md-10">
				<h3 class="display-3">This is a title</h3>
			</div>
		</div>
	</div>
</div>
    
<script type="text/plain" class="language-markup"><!-- simple header -->
<div class="jumbotron jumbotron-lg jumbotron-fluid jumbotron-lg-withnav mb-3 bg-primary position-relative">
	<div class="container text-white h-100 tofront">
		<div class="row align-items-center justify-content-center text-center">
			<div class="col-md-10">
				<h1 class="display-3">This is a title</h1>
			</div>
		</div>
	</div>
</div>
</script>
    
<br/>
<p><strong>Header with Nav</strong></p>
    
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<div class="container">
	<a class="navbar-brand" href="./index.html"><i class="fas fa-anchor mr-2"></i><strong>Anchor UI</strong> Kit</a>
	<button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarColor02" aria-controls="navbarColor02" aria-expanded="false" aria-label="Toggle navigation">
	<span class="navbar-toggler-icon"></span>
	</button>
	<div class="navbar-collapse collapse" id="navbarColor02" style="">
		<ul class="navbar-nav mr-auto d-flex align-items-center">
			<li class="nav-item">
			<a class="nav-link" href="./index.html">Intro</a>
			</li>
			<li class="nav-item dropdown">
			<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
			Examples </a>
			<div class="dropdown-menu" aria-labelledby="navbarDropdown">
				<a class="dropdown-item" href="./landing.html">Home Landing</a>
				<a class="dropdown-item" href="./login.html">User Login</a>
				<a class="dropdown-item" href="./blog.html">Blog Index</a>
				<a class="dropdown-item" href="./page.html">Sample Page</a>
			</div>
			</li>
			<li class="nav-item">
			<a class="nav-link" href="./docs.html">Docs</a>
			</li>
		</ul>
		<ul class="navbar-nav ml-auto d-flex align-items-center">
			<li class="nav-item">
			<span class="nav-link" href="#">
			<a class="btn btn-info btn-round shadow" href="#" data-toggle="modal" data-target="#modal_newsletter"><i class="fas fa-cloud-download-alt"></i> Download UI Kit </a><a href="https://github.com/wowthemesnet/Anchor-Bootstrap-UI-Kit/archive/master.zip" class="downloadzip"></a>
			
			</span>
			</li>
		</ul>
	</div>
</div>
</nav>
<div class="jumbotron jumbotron-lg jumbotron-fluid mb-3 bg-primary position-relative">
	<div class="container text-white h-100 tofront">
		<div class="row align-items-center justify-content-center text-center">
			<div class="col-md-10">
				<h3 class="display-3">This is a title</h3>
			</div>
		</div>
	</div>
</div>
<script type="text/plain" class="language-markup"><!-- header with nav -->
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<div class="container">
	<a class="navbar-brand" href="./index.html"><i class="fas fa-anchor mr-2"></i><strong>Anchor UI</strong> Kit</a>
	<button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarColor02" aria-controls="navbarColor02" aria-expanded="false" aria-label="Toggle navigation">
	<span class="navbar-toggler-icon"></span>
	</button>
	<div class="navbar-collapse collapse" id="navbarColor02" style="">
		<ul class="navbar-nav mr-auto d-flex align-items-center">
			<li class="nav-item">
			<a class="nav-link" href="./index.html">Intro</a>
			</li>
			<li class="nav-item dropdown">
			<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
			Examples </a>
			<div class="dropdown-menu" aria-labelledby="navbarDropdown">
				<a class="dropdown-item" href="./landing.html">Home Landing</a>
				<a class="dropdown-item" href="./login.html">User Login</a>
				<a class="dropdown-item" href="./blog.html">Blog Index</a>
				<a class="dropdown-item" href="./page.html">Sample Page</a>
			</div>
			</li>
			<li class="nav-item">
			<a class="nav-link" href="./docs.html">Docs</a>
			</li>
		</ul>
		<ul class="navbar-nav ml-auto d-flex align-items-center">
			<li class="nav-item">
			<span class="nav-link" href="#">
			<a class="btn btn-info btn-round shadow" href="#" data-toggle="modal" data-target="#modal_newsletter"><i class="fas fa-cloud-download-alt"></i> Download UI Kit </a><a href="https://github.com/wowthemesnet/Anchor-Bootstrap-UI-Kit/archive/master.zip" class="downloadzip"></a>
			
			</span>
			</li>
		</ul>
	</div>
</div>
</nav>
<div class="jumbotron jumbotron-lg jumbotron-fluid mb-3 bg-primary position-relative">
	<div class="container text-white h-100 tofront">
		<div class="row align-items-center justify-content-center text-center">
			<div class="col-md-10">
				<h1 class="display-3">This is a title</h1>
			</div>
		</div>
	</div>
</div>
</script>
    
<!----------------------------------------------------------------------
icons
------------------------------------------------------------------------>
    
<h2>Icons</h2>
    <p>Anchor UI Kit comes with latest Font Awesome, the web’s most popular icon set and toolkit. <a target="_blank" href="https://fontawesome.com/icons?d=gallery">Here</a> are all the available icons.</p>
    
<div class="alert alert-dark mt-5 mb-5">
    Simple Icon Options
    <ul>
    <li>Color: <code>text-*color</code></li>
    <li>Size: <code>fa-2x</code>, <code>fa-3x</code></li>
    </ul>
</div>
    
<div class="alert alert-dark mb-5">
    Bordered Icon Options
    <ul>
    <li>Color: <code>text-*color</code></li>
    <li>Size: <code>iconsmall</code>, <code>iconmedium</code>, <code>iconlarge</code></li>
    <li>Circle: <code>rounded-circle</code></li>
    <li>Shadow: <code>shadow</code>, <code>shadow-sm</code>, <code>shadow-lg</code></li>
    </ul>
</div>
    
<div class="alert alert-dark mb-5">
    Background Fill Icon Options
    <ul>
    <li>Background: <code>bg-*color</code></li>
    <li>Size: <code>iconsmall</code>, <code>iconmedium</code>, <code>iconlarge</code></li>
    <li>Circle: <code>rounded-circle</code></li>
    <li>Shadow: <code>shadow</code>, <code>shadow-sm</code>, <code>shadow-lg</code></li>
    </ul>
</div>
    
 <p><i class="fas fa-chart-line mr-2"></i> <i class="fas fa-chart-line fa-2x mr-2"></i> <i class="fas fa-chart-line fa-3x"></i></p>
    
<script type="text/plain" class="language-markup"><!-- icon sizes -->
<i class="fas fa-chart-line"></i> 
<i class="fas fa-chart-line fa-2x"></i> 
<i class="fas fa-chart-line fa-3x"></i></script>
<br/>
    
<p>Bordered Icons:</p>

<p>
<span class="iconbox iconsmall rounded-circle text-primary"><i class="fab fa-facebook-f"></i></span>
<span class="iconbox iconmedium rounded-circle text-info"><i class="fab fa-twitter"></i></span>
<span class="iconbox iconlarge rounded-circle text-danger"><i class="fab fa-google"></i></span>
</p>
    
<script type="text/plain" class="language-markup"><!-- bordered icons -->
<span class="iconbox iconsmall rounded-circle text-primary"><i class="fab fa-facebook-f"></i></span>
<span class="iconbox iconmedium rounded-circle text-info"><i class="fab fa-twitter"></i></span>
<span class="iconbox iconlarge rounded-circle text-danger"><i class="fab fa-google"></i></span></script>
    
<br/>
    
<p>Background Icons:</p>

<p>
<span class="iconbox iconsmall rounded-circle bg-primary text-white shadow border-0"><i class="fas fa-cart-arrow-down"></i></span> 
<span class="iconbox iconmedium rounded-circle bg-warning text-white shadow border-0"><i class="fas fa-coffee"></i></span> 
<span class="iconbox iconlarge rounded-circle bg-success text-white shadow border-0"><i class="fa fa-book-reader"></i></span>
</p>
    
<script type="text/plain" class="language-markup"><!-- background icons -->
<span class="iconbox iconsmall rounded-circle bg-primary text-white shadow border-0"><i class="fas fa-cart-arrow-down"></i></span> 
<span class="iconbox iconmedium rounded-circle bg-warning text-white shadow border-0"><i class="fas fa-coffee"></i></span> 
<span class="iconbox iconlarge rounded-circle bg-success text-white shadow border-0"><i class="fa fa-book-reader"></i></span></script>
    
<!----------------------------------------------------------------------
jumbotron
------------------------------------------------------------------------>
    
<h2>Jumbotron</h2>
    
<div class="alert alert-dark mb-5">
    Options:
    <ul>
    <li>Background color: <code>bg-*color</code></li>
    <li>Size: <code>jumbotron-md</code>, <code>jumbotron-lg</code>, <code>jumbotron-xl</code></li>
    <li>Text color: <code>text-*color</code></li>
    </ul>
</div>
    
<p><b>Jumbotron Simple</b></p>
    
<div class="jumbotron jumbotron-lg bg-cyan jumbotron-fluid">
	<div class="container text-center text-white h-100">
		<h3 class="display-2">Anchor <strong>UI Kit</strong></h3>
		<h5 class="font-weight-light">Free Bootstrap 4.1.3<strong> UI Kit</strong> with <strong><i class="fab fa-sass fa-2x"></i></strong> for rapid development</h5>
	</div>
</div>
    
<script type="text/plain" class="language-markup"><!-- jumbotron simple -->
<div class="jumbotron jumbotron-lg bg-cyan jumbotron-fluid">
	<div class="container text-center text-white h-100">
		<h1 class="display-2">Anchor <strong>UI Kit</strong></h1>
		<h5 class="font-weight-light">Free Bootstrap 4.1.3<strong> UI Kit</strong> with <strong><i class="fab fa-sass fa-2x"></i></strong> for rapid development</h5>
	</div>
</div></script>
    
<br/>
    
<p><b>Jumbotron with Background Image</b></p>
    
<div class="jumbotron jumbotron-xl jumbotron-fluid overlay overlay-blue" style="background-size:cover; background-image:url(assets/img/demo/1.jpg);">
	<div class="container text-center text-white h-100">
		<h3 class="display-2">Anchor <strong>UI Kit</strong></h3>
		<h5 class="font-weight-light">Free Bootstrap 4.1.3<strong> UI Kit</strong> with <strong><i class="fab fa-sass fa-2x"></i></strong> for rapid development</h5>
	</div>
	<p class="bottom-align-text-absolute">
		<span class="d-block text-center text-white">Made with <i class="fas fa-heart text-danger"></i> by WOW Themes</span>
	</p>
</div>
    
<script type="text/plain" class="language-markup"><!-- jumbotron with background image -->
<div class="jumbotron jumbotron-xl jumbotron-fluid overlay overlay-blue" style="background-size:cover; background-image:url(assets/img/demo/1.jpg);">
	<div class="container text-center text-white h-100">
		<h1 class="display-2">Anchor <strong>UI Kit</strong></h1>
		<h5 class="font-weight-light">Free Bootstrap 4.1.3<strong> UI Kit</strong> with <strong><i class="fab fa-sass fa-2x"></i></strong> for rapid development</h5>
	</div>
	<p class="bottom-align-text-absolute">
		<span class="d-block text-center text-white">Made with <i class="fas fa-heart text-danger"></i> by WOW Themes</span>
	</p>
</div></script> 
    
    
<!----------------------------------------------------------------------
modals
------------------------------------------------------------------------>
    
<h2>Modals</h2>
<p><button type="button" class="btn btn-primary w-100" data-toggle="modal" data-target="#exampleModalCenter">
Basic vertical center </button></p>
    
<!-- Modal Type 1 -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
	<div class="modal-dialog modal-dialog-centered" role="document">
		<div class="modal-content">
			<div class="modal-header border-0">
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
				<span aria-hidden="true">×</span>
				</button>
			</div>
			<div class="modal-body">
				<div class="pb-4 pr-4 pl-4 text-center">
					<h3 class="heading mt-4">Basic Modal</h3>
					<p>
						 Do not keep silent when your own ideas and values are being attacked. If a dictatorship ever comes to this country, it will be by the fault of those who keep silent.
					</p>
					<p>
						<em class="text-muted">You can add any HTML in the body.</em>
					</p>
				</div>
			</div>
		</div>
	</div>
</div>
    
    
<script type="text/plain" class="language-markup"><!-- button triggering modal -->
<button type="button" class="btn btn-primary w-100" data-toggle="modal" data-target="#exampleModalCenter">
Basic vertical center </button>

<!-- The modal itself -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
	<div class="modal-dialog modal-dialog-centered" role="document">
		<div class="modal-content">
			<div class="modal-header border-0">
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
				<span aria-hidden="true">×</span>
				</button>
			</div>
			<div class="modal-body">
				<div class="pb-4 pr-4 pl-4 text-center">
					<img src="assets/img/favicon.ico">
					<h3 class="heading mt-4">Basic Modal</h3>
					<p>
						 Do not keep silent when your own ideas and values are being attacked. If a dictatorship ever comes to this country, it will be by the fault of those who keep silent.
					</p>
					<p>
						<em class="text-muted">You can add any HTML in the body.</em>
					</p>
				</div>
			</div>
		</div>
	</div>
</div></script>   

    
<!----------------------------------------------------------------------
navbar
------------------------------------------------------------------------>
    
    
<h2>Navbars</h2>   
    
<div class="alert alert-dark mb-5">
    Options:
    <ul>
    <li>Background color: <code>bg-*color</code></li>
    <li>Text color: <code>navbar-dark</code>, <code>navbar-light</code></li>
    <li>Fixed: <code>fixed-top</code></li>
    <li>Fixed white bg on scroll: <code>topnav</code></li>
    </ul>
</div>
    
<p><strong>Dark Navbar</strong></p>

<nav class="navbar navbar-expand-lg navbar-dark bg-primary mb-4">
<div class="container">
	<a class="navbar-brand" href="#"><i class="fas fa-anchor mr-2"></i><strong>Anchor UI</strong> Kit</a><button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown-1" aria-controls="navbarNavDropdown-1" aria-expanded="false" aria-label="Toggle navigation" style=""><span class="navbar-toggler-icon"></span></button>
	<div class="collapse navbar-collapse" id="navbarNavDropdown-1">
		<ul class="navbar-nav mr-auto">
			<li class="nav-item active"><a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a></li>
			<li class="nav-item"><a class="nav-link" href="#">Features</a></li>
			<li class="nav-item"><a class="nav-link" href="#">Pricing</a></li>
			<li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="https://wowthemes.net" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Services</a>
			<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
				<a class="dropdown-item" href="#">Design</a><a class="dropdown-item" href="#">Development</a><a class="dropdown-item" href="#">Marketing</a>
			</div>
			</li>
		</ul>
		<ul class="navbar-nav">
			<li class="nav-item"><a class="nav-link" href="#"><i class="fab fa-twitter"></i></a></li>
			<li class="nav-item"><a class="nav-link" href="#"><i class="fab fa-facebook"></i></a></li>
			<li class="nav-item"><a class="nav-link" href="#"><i class="fab fa-linkedin"></i></a></li>
			<li class="nav-item"><a class="nav-link" href="#"><i class="fab fa-github"></i></a></li>
		</ul>
	</div>
</div>
</nav> 
    
    
<script type="text/plain" class="language-markup"><!-- navbar dark -->
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<div class="container">
	<a class="navbar-brand" href="#"><i class="fas fa-anchor mr-2"></i><strong>Anchor UI</strong> Kit</a><button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown-1" aria-controls="navbarNavDropdown-1" aria-expanded="false" aria-label="Toggle navigation" style=""><span class="navbar-toggler-icon"></span></button>
	<div class="collapse navbar-collapse" id="navbarNavDropdown-1">
		<ul class="navbar-nav mr-auto">
			<li class="nav-item active"><a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a></li>
			<li class="nav-item"><a class="nav-link" href="#">Features</a></li>
			<li class="nav-item"><a class="nav-link" href="#">Pricing</a></li>
			<li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="https://wowthemes.net" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Services</a>
			<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
				<a class="dropdown-item" href="#">Design</a><a class="dropdown-item" href="#">Development</a><a class="dropdown-item" href="#">Marketing</a>
			</div>
			</li>
		</ul>
		<ul class="navbar-nav">
			<li class="nav-item"><a class="nav-link" href="#"><i class="fab fa-twitter"></i></a></li>
			<li class="nav-item"><a class="nav-link" href="#"><i class="fab fa-facebook"></i></a></li>
			<li class="nav-item"><a class="nav-link" href="#"><i class="fab fa-linkedin"></i></a></li>
			<li class="nav-item"><a class="nav-link" href="#"><i class="fab fa-github"></i></a></li>
		</ul>
	</div>
</div>
</nav></script>  
    
<br/>
    
<p><strong>White Navbar</strong></p>
    
<p>You can change the color by replacing <code>bg-primary</code> with any of the other <a href="#colors">colors</a>. If you choose a light background you will want a dark text, so change <code>navbar-dark</code> with <code>navbar-light</code>. See the example below for a white bg navbar.</p>   

    
<nav class="navbar navbar-expand-lg navbar-light bg-white mb-4">
<div class="container">
	<a class="navbar-brand" href="#"><i class="fas fa-anchor mr-2"></i><strong>Anchor UI</strong> Kit</a><button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown-1" aria-controls="navbarNavDropdown-1" aria-expanded="false" aria-label="Toggle navigation" style=""><span class="navbar-toggler-icon"></span></button>
	<div class="collapse navbar-collapse" id="navbarNavDropdown-1">
		<ul class="navbar-nav mr-auto">
			<li class="nav-item active"><a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a></li>
			<li class="nav-item"><a class="nav-link" href="#">Features</a></li>
			<li class="nav-item"><a class="nav-link" href="#">Pricing</a></li>
			<li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="https://wowthemes.net" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Services</a>
			<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
				<a class="dropdown-item" href="#">Design</a><a class="dropdown-item" href="#">Development</a><a class="dropdown-item" href="#">Marketing</a>
			</div>
			</li>
		</ul>
		<ul class="navbar-nav">
			<li class="nav-item"><a class="nav-link" href="#"><i class="fab fa-twitter"></i></a></li>
			<li class="nav-item"><a class="nav-link" href="#"><i class="fab fa-facebook"></i></a></li>
			<li class="nav-item"><a class="nav-link" href="#"><i class="fab fa-linkedin"></i></a></li>
			<li class="nav-item"><a class="nav-link" href="#"><i class="fab fa-github"></i></a></li>
		</ul>
	</div>
</div>
</nav> 
     
<script type="text/plain" class="language-markup"><!-- navbar white -->
<nav class="navbar navbar-expand-lg navbar-light bg-white">
<div class="container">
	<a class="navbar-brand" href="#"><i class="fas fa-anchor mr-2"></i><strong>Anchor UI</strong> Kit</a><button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown-1" aria-controls="navbarNavDropdown-1" aria-expanded="false" aria-label="Toggle navigation" style=""><span class="navbar-toggler-icon"></span></button>
	<div class="collapse navbar-collapse" id="navbarNavDropdown-1">
		<ul class="navbar-nav mr-auto">
			<li class="nav-item active"><a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a></li>
			<li class="nav-item"><a class="nav-link" href="#">Features</a></li>
			<li class="nav-item"><a class="nav-link" href="#">Pricing</a></li>
			<li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="https://wowthemes.net" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Services</a>
			<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
				<a class="dropdown-item" href="#">Design</a><a class="dropdown-item" href="#">Development</a><a class="dropdown-item" href="#">Marketing</a>
			</div>
			</li>
		</ul>
		<ul class="navbar-nav">
			<li class="nav-item"><a class="nav-link" href="#"><i class="fab fa-twitter"></i></a></li>
			<li class="nav-item"><a class="nav-link" href="#"><i class="fab fa-facebook"></i></a></li>
			<li class="nav-item"><a class="nav-link" href="#"><i class="fab fa-linkedin"></i></a></li>
			<li class="nav-item"><a class="nav-link" href="#"><i class="fab fa-github"></i></a></li>
		</ul>
	</div>
</div>
</nav></script>      
    
    
    
<br/>
    
<p><strong>Fixed Navbar</strong></p>
<p>Add <code>fixed-top</code> to the <code>nav</code> class to have a fixed navigation.</p>
    
<div class="alert alert-orange mb-5 d-flex">
    <div>
        <span class="align-self-center iconbox iconsmall fill rounded-circle bg-danger text-white shadow border-0 mr-2"><i class="fas fa-bullhorn"></i>
        </span>
    </div> 
    <div>
        Important: Our demo includes a special class <code>topnav</code>. This changes the navigation background color on scroll to <code>bg-white</code>. The call is in <code>assets/js/functions.js</code> on line 4.
    </div>
</div>
    
<!----------------------------------------------------------------------
pagination
------------------------------------------------------------------------>
    
<h2>Pagination</h2>
    
<nav aria-label="Page navigation example">
<ul class="pagination">
	<li class="page-item"><a class="page-link" href="#"><i class="fas fa-angle-left"></i></a></li>
	<li class="page-item"><a class="page-link" href="#">1</a></li>
	<li class="page-item active"><a class="page-link" href="#">2</a></li>
	<li class="page-item"><a class="page-link" href="#">3</a></li>
	<li class="page-item"><a class="page-link" href="#">4</a></li>
	<li class="page-item"><a class="page-link" href="#">5</a></li>
	<li class="page-item"><a class="page-link" href="#">6</a></li>
	<li class="page-item"><a class="page-link" href="#"><i class="fas fa-angle-right"></i></a></li>
</ul>
</nav>
    
    
<script type="text/plain" class="language-markup"><!-- pagination -->
<nav aria-label="Page navigation example">
<ul class="pagination">
	<li class="page-item"><a class="page-link" href="#"><i class="fas fa-angle-left"></i></a></li>
	<li class="page-item"><a class="page-link" href="#">1</a></li>
	<li class="page-item active"><a class="page-link" href="#">2</a></li>
	<li class="page-item"><a class="page-link" href="#">3</a></li>
	<li class="page-item"><a class="page-link" href="#">4</a></li>
	<li class="page-item"><a class="page-link" href="#"><i class="fas fa-angle-right"></i></a></li>
</ul>
</nav></script>
    
<!----------------------------------------------------------------------
popovers
------------------------------------------------------------------------>
    
<h2>Popovers</h2>
    
<div class="alert alert-dark mb-5">
    Options:
    <ul>
    <li>Placement: <code>data-placement="top/right/bottom/left"</code></li>
    </ul>
</div>
    
<div class="alert alert-dark mb-5">
Call: <code>$(function () {
$('[data-toggle="popover"]').popover()
})
$('.popover-dismiss').popover({
  trigger: 'focus'
})</code>
</div>
    
<div class="mb-4">
    <h4 class="mb-4 h5">Click me</h4>
    <a tabindex="0" data-placement="top" class="btn btn-light" role="button" data-toggle="popover" data-trigger="focus" title="" data-content="And here's some amazing content. It's very engaging. Right?" data-original-title="Dismissible popover">On Top</a>
    <a tabindex="0" data-placement="right" class="btn btn-light" role="button" data-toggle="popover" data-trigger="focus" title="" data-content="And here's some amazing content. It's very engaging. Right?" data-original-title="Dismissible popover">On Right</a>
    <a tabindex="0" data-placement="bottom" class="btn btn-light" role="button" data-toggle="popover" data-trigger="focus" title="" data-content="And here's some amazing content. It's very engaging. Right?" data-original-title="Dismissible popover">On Bottom</a>
    <a tabindex="0" data-placement="left" class="btn btn-light" role="button" data-toggle="popover" data-trigger="focus" title="" data-content="And here's some amazing content. It's very engaging. Right?" data-original-title="Dismissible popover">On Left</a>
</div>
    
    
<script type="text/plain" class="language-markup"><!-- popover -->
<a tabindex="0" data-placement="top" class="btn btn-light" role="button" data-toggle="popover" data-trigger="focus" title="" data-content="And here's some amazing content. It's very engaging. Right?" data-original-title="Dismissible popover">On Top</a>
<a tabindex="0" data-placement="right" class="btn btn-light" role="button" data-toggle="popover" data-trigger="focus" title="" data-content="And here's some amazing content. It's very engaging. Right?" data-original-title="Dismissible popover">On Right</a>
<a tabindex="0" data-placement="bottom" class="btn btn-light" role="button" data-toggle="popover" data-trigger="focus" title="" data-content="And here's some amazing content. It's very engaging. Right?" data-original-title="Dismissible popover">On Bottom</a>
<a tabindex="0" data-placement="left" class="btn btn-light" role="button" data-toggle="popover" data-trigger="focus" title="" data-content="And here's some amazing content. It's very engaging. Right?" data-original-title="Dismissible popover">On Left</a></script>
    
    
<!----------------------------------------------------------------------
pricing
------------------------------------------------------------------------>
    
    
<h2>Pricing</h2>
    
<div class="alert alert-dark mb-5">
    Options:
    <ul>
    <li>Background color: <code>bg-*color</code> (apply to <code>card-header</code>)</li>
    <li>Button color: <code>btn-*color</code></li>
    <li>Text-color: <code>text-*color</code></li>
    <li>Shadow: <code>shadow-sm</code>, <code>shadow</code>, <code>shadow-lg</code> (apply to <code>card</code>)</li>
    </ul>
</div>
    
<div class="card-deck card-pricing text-center">
	<div class="card border-0 shadow-sm">
		<div class="card-header bg-info border-0 pt-4 pb-4">
			<h3 class="my-0 font-weight-normal mb-3">Personal</h3>
			<h4 class="card-title pricing-card-title">$11 <small class="text-muted">/ mo</small></h4>
		</div>
		<div class="card-body">
			<ul class="list-unstyled mt-3 mb-4">
				<li>10 users included</li>
				<li>2 GB of storage</li>
				<li>Email support</li>
				<li>Help center access</li>
			</ul>
			<button type="button" class="btn btn-info">Sign up for free</button>
		</div>
	</div>
	<div class="card shadow-sm border-0">
		<div class="card-header bg-primary border-0 pt-4 pb-4">
			<h3 class="my-0 font-weight-normal text-white mb-3">Premium</h3>
			<h4 class="card-title pricing-card-title text-white">$15 <small>/ mo</small></h4>
		</div>
		<div class="card-body">
			<ul class="list-unstyled mt-3 mb-4">
				<li>20 users included</li>
				<li>10 GB of storage</li>
				<li>Priority email support</li>
				<li>Help center access</li>
			</ul>
			<button type="button" class="btn btn-primary">Start Free</button>
		</div>
	</div>
	<div class="card border-0 shadow-sm">
		<div class="card-header bg-info border-0 pt-4 pb-4">
			<h3 class="my-0 font-weight-normal mb-3">Enterprise</h3>
			<h4 class="card-title pricing-card-title">$29 <small class="text-muted">/ mo</small></h4>
		</div>
		<div class="card-body">
			<ul class="list-unstyled mt-3 mb-4">
				<li>30 users included</li>
				<li>15 GB of storage</li>
				<li>Phone and email support</li>
				<li>Help center access</li>
			</ul>
			<button type="button" class="btn btn-info">Contact us</button>
		</div>
	</div>
</div>
    
<br>
    
<script type="text/plain" class="language-markup"><!-- pricing -->
<div class="card-deck card-pricing text-center">
	<div class="card border-0 shadow-sm">
		<div class="card-header bg-info border-0 pt-4 pb-4">
			<h3 class="my-0 font-weight-normal mb-3">Personal</h3>
			<h4 class="card-title pricing-card-title">$11 <small class="text-muted">/ mo</small></h4>
		</div>
		<div class="card-body">
			<ul class="list-unstyled mt-3 mb-4">
				<li>10 users included</li>
				<li>2 GB of storage</li>
				<li>Email support</li>
				<li>Help center access</li>
			</ul>
			<button type="button" class="btn btn-info">Sign up for free</button>
		</div>
	</div>
	<div class="card shadow-sm border-0">
		<div class="card-header bg-primary border-0 pt-4 pb-4">
			<h3 class="my-0 font-weight-normal text-white mb-3">Premium</h3>
			<h4 class="card-title pricing-card-title text-white">$15 <small>/ mo</small></h4>
		</div>
		<div class="card-body">
			<ul class="list-unstyled mt-3 mb-4">
				<li>20 users included</li>
				<li>10 GB of storage</li>
				<li>Priority email support</li>
				<li>Help center access</li>
			</ul>
			<button type="button" class="btn btn-primary">Start Free</button>
		</div>
	</div>
	<div class="card border-0 shadow-sm">
		<div class="card-header bg-info border-0 pt-4 pb-4">
			<h3 class="my-0 font-weight-normal mb-3">Enterprise</h3>
			<h4 class="card-title pricing-card-title">$29 <small class="text-muted">/ mo</small></h4>
		</div>
		<div class="card-body">
			<ul class="list-unstyled mt-3 mb-4">
				<li>30 users included</li>
				<li>15 GB of storage</li>
				<li>Phone and email support</li>
				<li>Help center access</li>
			</ul>
			<button type="button" class="btn btn-info">Contact us</button>
		</div>
	</div>
</div></script>
    
<!----------------------------------------------------------------------
tables
------------------------------------------------------------------------>
    
<h2>Table</h2>
    
<table class="table">
<thead class="thead-dark">
<tr>
	<th scope="col">
		 #
	</th>
	<th scope="col">
		 First
	</th>
	<th scope="col">
		 Last
	</th>
	<th scope="col">
		 Handle
	</th>
</tr>
</thead>
<tbody>
<tr>
	<th scope="row">
		 1
	</th>
	<td>
		 Mark
	</td>
	<td>
		 Otto
	</td>
	<td>
		 @mdo
	</td>
</tr>
<tr>
	<th scope="row">
		 2
	</th>
	<td>
		 Jacob
	</td>
	<td>
		 Thornton
	</td>
	<td>
		 @fat
	</td>
</tr>
<tr>
	<th scope="row">
		 3
	</th>
	<td>
		 Larry
	</td>
	<td>
		 the Bird
	</td>
	<td>
		 @twitter
	</td>
</tr>
</tbody>
</table>
    
    
    
<script type="text/plain" class="language-markup"><!-- table -->
<table class="table">
<thead class="thead-dark">
<tr>
	<th scope="col"> #      </th>
	<th scope="col"> First	</th>
	<th scope="col"> Last	</th>
	<th scope="col"> Handle	</th>
</tr>
</thead>
<tbody>
<tr>
	<th scope="row"> 1	</th>
	<td> Mark </td>
	<td> Otto </td>
	<td> @mdo </td>
</tr>
<tr>
	<th scope="row"> 2	</th>
	<td> Jacob	  </td>
	<td> Thornton </td>
	<td> @fat     </td>
</tr>
<tr>
	<th scope="row"> 3	</th>
	<td> Larry    </td>
	<td> the Bird </td>
	<td> @twitter </td>
</tr>
</tbody>
</table></script>
    
<!----------------------------------------------------------------------
 tooltips
------------------------------------------------------------------------>
    
<h2>Tooltips</h2>    
<div class="alert alert-dark mb-5">
    Options:
    <ul>
    <li>Placement: <code>data-placement="top/right/bottom/left"</code></li>
    </ul>
</div>
    
<div class="alert alert-dark mb-5">
Call: <code>
$(function () {
$('[data-toggle=&quot;tooltip&quot;]').tooltip()
})
</code>
</div>
   
<div class="mb-4">
<button type="button" class="btn btn-light" data-toggle="tooltip" data-placement="top" title="" data-original-title="Tooltip on top">
On top </button>
<button type="button" class="btn btn-light" data-toggle="tooltip" data-placement="right" title="" data-original-title="Tooltip on right">
On right </button>
<button type="button" class="btn btn-light" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Tooltip on bottom">
On bottom </button>
<button type="button" class="btn btn-light" data-toggle="tooltip" data-placement="left" title="" data-original-title="Tooltip on left">
On left </button>
    </div>

    
<script type="text/plain" class="language-markup"><!-- tooltips -->
<button type="button" class="btn btn-light" data-toggle="tooltip" data-placement="top" title="" data-original-title="Tooltip on top">
On top </button>

<button type="button" class="btn btn-light" data-toggle="tooltip" data-placement="right" title="" data-original-title="Tooltip on right">
On right </button>

<button type="button" class="btn btn-light" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Tooltip on bottom">
On bottom </button>

<button type="button" class="btn btn-light" data-toggle="tooltip" data-placement="left" title="" data-original-title="Tooltip on left">
On left </button></script>

    
    
</div><!-- End docs -->
</div>
</div>
</div>
<!-- End DOCS -->
    

  
<!------------------------------------------
DEMO MODAL & DONATE BUTTON ONLY - DON'T COPY
------------------------------------------->
<div class="modal fade" id="modal_newsletter" tabindex="-1" role="dialog" aria-labelledby="modal_newsletter" aria-hidden="true">
	<div class="modal-dialog shadow-lg" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<div class="d-flex align-items-center justify-content-center">
					<em class="text-muted mr-2">Share this freebie:</em>
					<!-- Share Facebook -->
					<span class="c-pointer iconbox iconsmall rounded-circle bg-secondary text-white mr-1" data-sharer="facebook" data-url="https://www.wowthemes.net/anchor-free-bootstrap-ui-kit/"><i class="fab fa-facebook-f"></i></span>
					<!-- Share Twitter -->
					<span class="c-pointer iconbox iconsmall rounded-circle bg-info text-white mr-1" data-sharer="twitter" data-title="Download Anchor - Free Bootstrap 4.1.x UI Kit with Sass!" data-hashtags="bootstrap,free" data-url="https://www.wowthemes.net/anchor-free-bootstrap-ui-kit/"><i class="fab fa-twitter"></i></span>
					<!-- Share Google+ -->
					<span class="c-pointer iconbox iconsmall rounded-circle bg-danger text-white mr-1" data-sharer="googleplus" data-url="https://www.wowthemes.net/anchor-free-bootstrap-ui-kit/"><i class="fab fa-google"></i></span>
					<!-- Share E-mail -->
					<span class="c-pointer iconbox iconsmall rounded-circle bg-purple text-white mr-1" data-sharer="email" data-title="Bootstrap KIT Url" data-url="https://www.wowthemes.net/anchor-free-bootstrap-ui-kit/" data-subject="Download Anchor - Free Bootstrap 4.1.x UI Kit with Sass!" data-to="some@email.com"><i class="fas fa-envelope"></i></span>
					<!-- Sharingbutton Pinterest -->
					<span class="c-pointer iconbox iconsmall rounded-circle bg-danger text-white mr-1" data-sharer="pinterest" data-url="https://www.wowthemes.net/anchor-free-bootstrap-ui-kit/"><i class="fab fa-pinterest"></i></span>
				</div>
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
				<span aria-hidden="true">&times;</span>
				</button>
			</div>
			<div class="modal-body">
				<div class="text-center mb-3">
					<img src="assets/img/favicon.ico">
				</div>
				<h6 class="text-center font-weight-light ">Thanks for downloading Anchor Bootstrap UI Kit!</h6>
				<h5 class="text-center mb-4">We'll e-mail you when a new version arrives! *</h5>
				<form id="newsletter-form" action="https://www.themepush.com/sendy/subscribe" method="POST" accept-charset="utf-8">
					<div class="d-none">
						<label for="hp">HP</label>
						<br>
						<input type="text" name="hp" id="hp">
					</div>
					<div class="row justify-content-center align-items-center">
						<div class="col-md-6">
							<div class="form-group has-icon-left form-control-name">
								<label class="sr-only" for="inputName">Your name</label>
								<input type="text" name="name" id="name" required="" pattern="[A-Za-z\s]+" class="form-control" placeholder="Name">
							</div>
						</div>
						<div class="col-md-6">
							<div class="form-group has-icon-left form-control-email">
								<label class="sr-only" for="inputEmail">Email address</label>
								<input type="email" name="email" id="email" required="" class="form-control" placeholder="E-mail">
							</div>
						</div>
						<input type="hidden" name="list" value="CVN62nDKE0qTf4XLs8J9iQ" checked="checked">
						<div class="col-md-12 mb-3">
							<input type="hidden" name="subform" value="yes">
							<input onclick="requiredConsent()" class="btn btn-success btn-block shadow-sm" value="Send me updates & more freebies" type="submit" name="submit" id="submit">
						</div>
						<div class="col-md-12 mb-3 text-center">
							<small class="d-block" style="color:#ccc;font-style:italic;line-height:1.4;">* This is a newsletter managed by WowThemes, the item author. It is the only way we can reach you out when a new version is released, so, please, subscribe!</small>
						</div>
					</div>
					<div class="row justify-content-center d-none mt-3">
						<label class="c-input c-checkbox small">
						<input type="checkbox" name="gdpr" id="gdpr" checked="checked">
						<span class="c-indicator"></span> I agree to the <a target="_blank" href="https://www.wowthemes.net/privacy-policy/#newsletter-subscription-forms">privacy policy</a>. </label>
					</div>
				</form>
			</div>
		</div>
	</div>
</div>
<!--------------------------------------
END DEMO MODAL & DONATE BUTTON
--------------------------------------->

    
<!--------------------------------------
FOOTER
--------------------------------------->
<footer class="bg-light pb-5 pt-4">
<div class="container">
	<div class="row justify-content-center text-center">
		<div class="col-md-12">			
			<span class="d-block mt-3 text-muted">©
			<script>document.write(new Date().getFullYear())</script>
			 Anchor Bootstrap UI Kit,  by <a target="_blank" href="https://www.wowthemes.net">WowThemes.net</a>. <br/><a target="_blank" href="https://www.wowthemes.net/freebies-license/">License</a></span>
		</div>
	</div>
</div>
</footer>
    
    
</main>
<!--- end main -->
    
    
<!--------------------------------------
JAVASCRIPTS
--------------------------------------->    
<script src="./assets/js/vendor/jquery.min.js" type="text/javascript"></script>
<script src="./assets/js/vendor/popper.min.js" type="text/javascript"></script>
<script src="./assets/js/vendor/bootstrap.min.js" type="text/javascript"></script>
<script src="./assets/js/functions.js" type="text/javascript"></script>
    
<!-- Docs -->
<script src="./assets/js/vendor/prism.js" type="text/javascript"></script>
<script src="./assets/js/vendor/bootstrap-toc.js" type="text/javascript"></script>
<script>
    $(function() {
      new ClipboardJS('.btn');
      var navSelector = '#toc';
      var $myNav = $(navSelector);
      Toc.init({
          $nav: $('#toc'),
          $scope: $('#docsarea')
        });
      $('body').scrollspy({
        target: navSelector
      });        
    });
</script>

    
<!-- Animation -->
<script src="./assets/js/vendor/aos.js" type="text/javascript"></script>
<noscript>
    <style>
        *[data-aos] {
            display: block !important;
            opacity: 1 !important;
            visibility: visible !important;
        }
    </style>
</noscript>
<script>
    AOS.init({
        duration: 700
    });
</script>
 
<!-- Disable animation on less than 1200px, change value if you like -->
<script>
AOS.init({
  disable: function () {
    var maxWidth = 1200;
    return window.innerWidth < maxWidth;
  }
});
</script>
    
<!-- Tooltips -->
<script> $(function () { $('[data-toggle="tooltip"]').tooltip() }) </script>
    
<!-- Popovers -->    
<script> 
$(function () {
$('[data-toggle="popover"]').popover()
})
$('.popover-dismiss').popover({
  trigger: 'focus'
})
</script>

</body>
</html>